<template>
    <div class="processWrap">
        <div class="processWrap-header">流程</div>
        <a-timeline class="processWrap-flow" :gutter="[0, 24]">
            <a-timeline-item :span="24" v-for="item in list" :key="item.id" class="processWrap-flow-item">
                <a-space align="start">
                    <div class="processWrap-flow-item-head">
                        <UserAvatar :user="item" :size="48"></UserAvatar>
                        <span class="processWrap-status-icon refuse" v-if="item.result === 'REFUSE'"></span>
                        <span class="processWrap-status-icon agree" v-else></span>
                    </div>
                    <div class="processWrap-flow-item-content">
                        <a-space>
                            <span>{{ getItemTitle(item) }}</span>
                            <span class="flow-item-title-time">{{ item.date }}</span>
                        </a-space>
                        <template v-if="item.type === 'PROCESS_CC'">
                            <div class="send-copy">
                                <div class="send-copy-title cf">
                                    <span>已抄送{{ item.ccUserNames.length }}人</span>
                                    <!-- <span class="text-primary margin-left">全部已读</span> -->
                                    <span class="fr icon-up" :class="{ down: item.hideUsers }"
                                        @click="toggleHideUsers(item)"></span>
                                </div>
                            </div>
                            <div class="ulListWrap" v-show="!item.hideUsers">
                                <a-space class="spaceWrap" :wrap="true">
                                    <a-space direction="vertical" align="center" :size="0" v-for="user in item.ccUserNames" :key="user">
                                        <UserAvatar :size="48" :user="{ userName: user }"></UserAvatar>
                                        <div class="margin-top-xs name">{{ user }}</div>
                                    </a-space>
                                </a-space>
                            </div>
                        </template>
                        <div v-else class="flow-item-username" style="color:#000000">
                            {{ item.userName }}
                        </div>
                        <div class="flow-item-remark" v-if="item.remark">
                            {{ item.remark }}
                        </div>
                    </div>
                </a-space>
            </a-timeline-item>
        </a-timeline>
    </div>
</template>

<script>
import UserAvatar from '@/components/Process/UserAvatar.vue';
export default {
    name: 'Process',
    components: {
        UserAvatar,
    },
    props: {
        list: {
            type: [Array, Object],
        },
        detail: {
            type: Object,
        }
    },
    mounted() {
        console.log('detail==', this.detail);
        console.log('list==', this.list);
    },
    computed: {
        recordList() {
            return this.data.map(item => {
                if (item.type === 'PROCESS_CC') {
                    item.userIcon = require('@/assets/svg/icon-laba.svg');
                }
                if (item.userId === 'bpms_system') {
                    item.userIcon = require('@/assets/svg/icon-system.svg');
                }
                return item;
            });
        },
    },
    methods: {
        toggleHideUsers(item) {
            this.$set(item, 'hideUsers', !item.hideUsers);
        },
        getItemTitle(item) {
            if (item.activityName) {
                return item.activityName;
            }
            if (item.userId === 'bpms_system') {
                return '系统';
            }
            const map = {
                START_PROCESS_INSTANCE: '发起申请',
                PROCESS_CC: '审批人（抄送或签审批人）',
                EXECUTE_TASK_NORMAL: '审批人',
                EXECUTE_TASK_AGENT: '代理人审批',
                APPEND_TASK_BEFORE: '前加签',
                APPEND_TASK_AFTER: '后加签',
                REDIRECT_TASK: '转交',
                TERMINATE_PROCESS_INSTANCE: '撤销申请',
                FINISH_PROCESS_INSTANCE: '结束申请',
                ADD_REMARK: '添加评论',
                REDIRECT_PROCESS: '审批退回',
            };
            return map[item.type] || '审批人';
        },
    }
}
</script>

<style lang="less" scoped>
.processWrap {
    &-header {
        font-size: 17px;
        padding: 0px 14px 12px;
        font-weight: 560;
    }

    &-flow {
        padding-left: 14px;

        &-item {}
    }

    .ulListWrap {
        margin-top: 8px;
    }

    .spaceWrap {
        display: flex;
        flex-wrap: wrap;
    }

    ::v-deep {
        .user-avatar-name {
            color: #ffffff;
        }
    }
}
</style>